<template>
  <div class="container">
    <div class="app-container">
      <el-tree default-expand-all :data="depts" :props="defaultProps">
        <template v-slot="{data}">
          <el-row style="width: 100%;display: flex;justify-content: space-between;">
            <el-col>
              <div>  <span>{{ data.name }}</span></div>
            </el-col>

            <div>{{ data.managerName }}</div>

          </el-row>
        </template>
      </el-tree>
    </div>
  </div>
</template>
<script>
import { getDepartmentAPI } from '@/api/department'
import buildTree from '@/utils/tree'

export default {
  name: 'Department',
  data() {
    return {
      depts: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      const res = await getDepartmentAPI()
      const tree = buildTree(res)
      this.depts = tree
    }
  }
}
</script>
